<script setup>
import { ref } from 'vue';

const blogList = ref([
  {
    year: 2025,
    list: [
      {
        date: '2025-08-07',
        title: 'Vue3：h 函数使用',
        path: '/blog/vue3-h-function',
      },
      {
        date: '2025-05-29',
        title: 'Flutter：fvm 管理多版本 Flutter SDK',
        path: '/blog/flutter-fvm',
      },
      {
        date: '2025-04-22',
        title: 'Flutter：windows 系统 Gradle 缓存路径配置',
        path: '/blog/flutter-gradle-cache-path',
      },
      {
        date: '2025-03-24',
        title: '软件：Finalshell『SSH 工具，服务器管理，远程桌面』',
        path: '/blog/soft-finalshell',
      },
      {
        date: '2025-03-20',
        title: '软件：音乐标签『用于给 mp3 歌曲添加标签和封面』',
        path: '/blog/soft-music-tags',
      },
      {
        date: '2025-03-18',
        title: '此博客创建初衷',
        path: '/blog/the-original-intention-of-creating-this-blog',
      },
    ],
  },
]);
</script>

<template>
  <div class="w-full h-full overflow-auto pt-8">
    <div v-for="(item, index) in blogList" :key="index">
      <div class="hollow text-4xl px-1 font-bold pb-4">{{ item.year }}</div>
      <div class="px-1 text-lg">
        <div
          class="flex align-top pb-2"
          v-for="(item, index) in item.list"
          :key="index"
        >
          <div class="flex-none text-gray-500">{{ item.date }}</div>
          <div class="flex-1 text-wrap pl-2 break-all text-gray-900">
            <router-link :to="item.path">{{ item.title }}</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.hollow {
  text-shadow: 0 0 2px #409aed, 0 0 2px #409aed, 0 0 2px #409aed;
  color: #fff;
}
</style>
